Step-by-Step Portfolio Worksheet
Techno-Pastel Vision
Student: Helen | Major: Design & Technology | Minor: Fashion Business
Step 1: Develop Your Idea
Purpose of the Site
The purpose of this website is to present my work in a way that reflects both my visual style and my interests as a Design and Technology student. Instead of working only as a gallery of finished projects, the site is meant to show my personality, design approach, and the kinds of digital experiences I want to create. Because I also study Fashion Business, I want the portfolio to balance creativity, interaction, and a strong sense of visual identity.
Problem to Solve
Many portfolios are clear and organized, but they can also feel very static. For a student working with interaction, motion, and digital storytelling, that format does not always show how the work is meant to be experienced. One problem I want to solve is how to make a portfolio feel more engaging and expressive while still being easy to navigate. I want visitors to understand not only what I made, but also how I think as a designer.
Goal
My goal is to create a visual and interactive portfolio that feels personal, playful, and polished. I want the site to communicate my interests in web design, interface design, storytelling, and experimental visuals. At the same time, it should stay clear enough for classmates, professors, and future collaborators to move through it easily and understand my work.
Step 2: Discovery and Research
Reference 1: MEW (mew.xyz)
What Works Well: This site stands out because it has a very clear personality. The branding feels playful and memorable, and the visuals make the website feel alive. I also like that the site does not rely on a standard portfolio layout. It feels more expressive and creative, which makes it easier to remember.
Takeaway: One important lesson from this site is that a portfolio can be stronger when it has a distinct voice. I want my own site to feel personal and visually recognizable instead of generic.
Reference 2: Valentines with Alice K
Inspiration: I was drawn to this site because of its soft color palette, emotional atmosphere, and careful interaction details. It shows that pink can feel thoughtful and intentional rather than childish. The small transitions and visual softness make the site feel warm and inviting.
Takeaway: From this reference, I learned that color and motion can help shape the tone of a website. I want to use soft pink tones, layered backgrounds, and gentle interactive moments to create a similar feeling in my own work.
Reference 3: Into The Woods (intothewoods.nl)
Inspiration: This website is much more layered and immersive. It feels busy, but it is still organized in a way that guides the user through the experience. I like how it creates depth and makes the page feel more like a space than a flat screen.
Takeaway: This reference made me think about how to build a more immersive portfolio. I want to experiment with overlapping elements, floating visuals, and layout depth so the site feels more dynamic.
Step 3: Target Your Audience
My target audience includes classmates, professors, future coworkers, and other people in creative fields who may view my portfolio. I want this website to communicate my interest in interactive design, visual storytelling, and digital experiences. My work is aimed at people who enjoy expressive visuals, creative ideas, and projects that mix technology with personal style. I also want the site to show not only what I made, but how I think and work as a designer. The tone is personal, creative, and welcoming, so the portfolio feels clear and approachable.
Step 4: Inspiration and Concepts
Concept 1: Maximalist Digital Dream
This concept focuses on layered visuals, bright colors, and a more immersive feeling. It would include illustration, bold interface elements, and playful movement. The goal is to make the portfolio feel expressive and memorable.
Concept 2: Minimalist Techno-Chic
This concept is more restrained and organized. It would use stronger typography, cleaner spacing, and smaller pixel-style details. The overall look would still feel personal, but it would present the work in a more structured way.
Step 5 & 6: Sketches & Wireframes
In this stage, I focused on how the layout would guide people through the site. My sketches explore ways to make the navigation feel more interactive while still keeping the content readable. I was especially interested in testing a floating navigation system instead of a more traditional top menu. The wireframes helped me decide where to place images, project sections, and text so the site could feel expressive without becoming confusing. I also thought about how the design would shift across desktop and mobile screens.
Step 7: Final Comps
My final comps bring together the main ideas from my research and early sketches. I used soft transparency, layered color, and strong pink accents to create depth while keeping the design visually consistent. At this point, I wanted the portfolio to feel polished but still personal. The comps helped me see how the website could balance decorative details with a clear structure.
Step 8: Reflection
Next Steps for Coding: My next step is to start building the layout in HTML and CSS and then refine the colors, spacing, and interactions. I also want to experiment with small interactive effects that can make the site feel more active without distracting from the content.
Potential Challenges: One challenge will be balancing style and usability. I want the portfolio to feel visually interesting, but I also need it to stay readable and easy to navigate. Another challenge will be adding custom details, such as cursor effects or moving background elements, without slowing down the site.
Excited Outcomes: I am excited to turn this into a portfolio that feels much closer to my own personality and design interests. I want the final site to represent the combination of design, technology, and visual storytelling that I care about most.